<script lang="ts">
export default {
  name: "DeviceTemplateEntityTable"
}
</script>

<template>
  <!-- 数据表单 -->
  <el-table
    ref="dataTableRef"
    v-loading="dataState.loading"
    :data="dataState.entityList"
    border
    highlight-current-row
  >
    <el-table-column align="center" width="40" type="selection"/>
    <el-table-column label="设备厂商" min-width="150" prop="manufacturerShow"/>
    <el-table-column label="设备类型" min-width="150" prop="deviceType"/>
    <el-table-column label="文件名称" min-width="150" prop="fileName"/>
    <el-table-column :formatter="formatDate4elTableColumn" align="center" label="创建时间" prop="createTime"
                     width="180"/>
    <el-table-column :formatter="formatDate4elTableColumn" align="center" label="更新时间" prop="updateTime"
                     width="180"/>
    <el-table-column align="center" label="操作" width="150">
      <template #default="scope">
        <el-button :icon="Download" circle plain type="success" @click.stop="handleDownload(scope.row)"/>
        <el-button :icon="Delete" circle plain type="danger" @click.stop="handleDelete(scope.row)"/>
      </template>
    </el-table-column>

  </el-table>

  <!-- 分页工具条 -->
  <pagination v-if="dataState.total > 0" v-model:limit="dataState.queryParams.pageSize" v-model:page="dataState.queryParams.pageNum" :total="dataState.total"
              @pagination="handleQuery"/>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from "vue";

import {Delete, Download} from '@element-plus/icons-vue';
import {formatDate4elTableColumn,} from '@/utils/formatter';
import {listFileTemplateEntities} from "@/api/repo/comp/local";
import {FileTemplateItem, RepoCompQueryParam} from "@/api/repo/comp/local/types";

const emit = defineEmits(['rowClick', 'update', 'delete', 'download']);// 定义组件的事件通知

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable, getIds, getEntities});

// 数据状态：定义
let dataState = reactive({
  // 页面转载状态
  loading: true,
  // 选中ID数组
  selects: [],
  // 记录总数
  total: 0,
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 组件ID
  compId: 0,
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompQueryParam,
  // 实体数据
  entityList: [] as FileTemplateItem[],
});

/**
 * 捕获下载按钮
 * @taskParam row 行信息
 */
function handleDownload(row: any) {
  let form = {
    id: 0,
    fileName: '',
  }

  form.id = dataState.compId;
  form.fileName = row.fileName;
  emit('download',  form);
}

/**
 * 捕获删除按钮
 * @taskParam row 行信息
 */
function handleDelete(row: any) {
  let form = {
    id: 0,
    fileName: '',
  }

  form.id = dataState.compId;
  form.fileName = row.fileName;
  emit('delete',  form);
}

/**
 * 刷新页面信息
 */
function handleQuery() {
  emit('rowClick', {});

  dataState.loading = true;

  dataState.entityList = [];
  dataState.queryParams.compId = dataState.compId;
  listFileTemplateEntities(dataState.queryParams).then(({data}) => {
    dataState.entityList = data.list;
    dataState.total = data.total;
    dataState.loading = false;
  });
}

/**
 * 获得选中的ID
 */
function getIds(): any {
  return dataState.selects;
}

/**
 * 获得实体信息
 */
function getEntities(): any {
  return dataState.entityList;
}

/**
 * 刷新表单
 */
function refreshTable(queryParams: RepoCompQueryParam) {
  dataState.queryParams = queryParams;

  handleQuery();
}

function getUuidFromHref() {
  let tag = "/repo-comp/local/file-template/file-list?compId=";
  let start = location.href.indexOf(tag);
  if (start <= 0) {
    return;
  }

  dataState.compId = Number.parseInt(location.href.substring(start + tag.length));
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  getUuidFromHref();

  // 查询实体数据
  handleQuery();
});

</script>
